<script setup lang="ts">
	import { ref, useAttrs, inject, unref, computed, watch } from 'vue'

	const emit = defineEmits(['close', 'submit'])
	const attrs = useAttrs()

	const goodsInfo = inject('currentGoods') as any
	console.log(goodsInfo)
	watch(
		() => goodsInfo.value,
		(val) => {
			formData.value = {
				id: val.id,
				sale_price: val.sale_price,
				count: Number(val.count) || 0
			}
		},
		{
			deep: true
		}
	)
	const formData = ref({
		id: '',
		sale_price: 0,
		count: 0
	})

	const total = computed(() => {
		const { sale_price, count } = unref(formData)
		return Number(sale_price) * Number(count) || 0
	})
</script>
<template>
	<up-popup v-bind="attrs" @close="emit('close')" closeable :round="10">
		<view class="content">
			<view class="goods_info_wrap">
				<view class="goods_img">
					<image :src="goodsInfo.goods.image" style="width: 160rpx;height: 160rpx;"></image>
				</view>
				<view class="goods_info">
					<view class="info-name">{{goodsInfo.goods.name}}</view>
					<view class="info-bord">规格：<text style="color: rgba(2, 14, 36, 1);">{{goodsInfo.spec.name}}</text>
					</view>
					<view class="info-bord">规格：<text style="color: rgba(2, 14, 36, 1);">{{goodsInfo.spec.name}}</text>
					</view>
				</view>
			</view>
			<view class="list">
				<up-row justify="space-between" gutter="10">
					<up-col span="3">
						<up-text text="数量" color="rgba(109, 108, 112, 1)"></up-text>
					</up-col>
					<up-col span="3">
						<up-text text="单价" color="rgba(109, 108, 112, 1)"></up-text>
					</up-col>
					<up-col span="2">
						<up-text text="小计" color="rgba(109, 108, 112, 1)"></up-text>
					</up-col>
					<up-col span="2">
						<up-text text="库存" color="rgba(109, 108, 112, 1)"></up-text>
					</up-col>
					<up-col span="2">
						<up-text text="备注" color="rgba(109, 108, 112, 1)"></up-text>
					</up-col>
				</up-row>
				<block v-for="(item, index) in formData" :key="index">
					<up-row justify="space-between" gutter="10">
						<up-col span="3">
							<up-input v-model="item.count" :customStyle="{backgroundColor: '#f0f0f0'}" placeholder=""
								border="none" :suffixIcon="item.unit"
								suffixIconStyle="color:rgba(109, 108, 112, 1);font-size: 28rpx;"
								@change="change($event,item)"></up-input>
						</up-col>
						<up-col span="3">
							<up-input v-model="item.sale_price" :customStyle="{backgroundColor: '#f0f0f0'}"
								placeholder="" border="none" prefixIcon="￥"
								prefixIconStyle="font-size: 15px;color: rgba(245, 99, 81, 1)"
								color="rgba(245, 99, 81, 1)" @change="changess($event,item)"></up-input>
						</up-col>
						<up-col span="2">
							<up-text :text="item.total" mode="price" align="left" size="10"></up-text>
						</up-col>
						<up-col span="2">
							<up-text :text="item.stock" align="left" size="10"></up-text>
						</up-col>
						<up-col span="2">
							<up-input v-model="item.remark" :customStyle="{backgroundColor: '#f0f0f0'}" placeholder="备注"
								border="none"></up-input>
						</up-col>
					</up-row>
				</block>
			</view>
			<view class="line"></view>
			<view>
				<up-row justify="space-between" gutter="5">
					<up-col span="1.5">
						<up-text text="赠品" align="left"></up-text>
					</up-col>
					<up-col span="3" v-for="(item, index) in formData" :key="index">
						<up-input v-model="item.num" :customStyle="{backgroundColor: '#f0f0f0'}" placeholder=""
							border="none" :suffixIcon="item.unit"
							suffixIconStyle="color:rgba(109, 108, 112, 1);font-size: 28rpx;"></up-input>
					</up-col>
					<up-col span="3">
						<up-input v-model="remarked" :customStyle="{backgroundColor: '#f0f0f0'}" placeholder="备注"
							border="none"></up-input>
					</up-col>
				</up-row>
			</view>
			<view class="form_wrap">
				<view class="submit_btn" @tap="addTo()">
					<text style="margin-left: 20rpx;">提交</text>
				</view>
			</view>
		</view>
		<!-- <view class="content">
			<view class="goods_info_wrap">
				<view class="goods_info">
					<text>商品名称：{{goodsInfo.name}}</text>
					<text>当前库存：{{goodsInfo.remain_count}}</text>
					<text>单位：{{goodsInfo.unit}}</text>
				</view>
				<view class="goods_img">
					<image :src="goodsInfo.image" style="width: 160rpx;height: 160rpx;"></image>
					<text style="color: #6D6C70;">{{goodsInfo.name}}</text>
				</view>
			</view>
			<view class="form_wrap">
				<view class="form_item" style="display: block;border-bottom: none ;">
					<text class="label">价格</text>
					<view class="price_wrap">
						<view class="price">
							<up-input v-model="formData.sale_price">
								<template #prefix>
									<up-text text="￥" margin="0 6rpx 0 0" type="tips"></up-text>
								</template>
							</up-input>
						</view>
						<view class="quantity">
							<up-number-box v-model="formData.count" :min="0" integer color="#806AF7" inputWidth="50%">
								<template #minus>
									<view class="minus">
										<up-icon name="minus" size="24rpx" color="#FFFFFF"></up-icon>
									</view>
								</template>
								<template #plus>
									<view class="plus">
										<up-icon name="plus" color="#fff" size="24rpx"></up-icon>
									</view>
								</template>
							</up-number-box>
						</view>
					</view>
				</view>
				<view class="tip">
					<view class="total">
						<text>合计金额：</text>
						<text style="font-size: 32rpx;color: #F54E4E;">￥{{total}}</text>
					</view>
				</view>
				<view class="submit_btn" @tap="emit('submit', unref(formData))">
					<text style="margin-left: 20rpx;">添加</text>
				</view>
			</view>
		</view> -->
	</up-popup>
</template>

<style lang="scss" scoped>
	.minus {
		width: 44rpx;
		height: 44rpx;
		background-color: #C8C8C8;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.plus {
		width: 44rpx;
		height: 44rpx;
		background-color: #806AF7;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.content {
		width: 100%;
		// height: 80vh;
		padding: 32rpx 28rpx;
		box-sizing: border-box;

		.goods_info_wrap {
			display: flex;
			width: 100%;
			font-size: 28rpx;
			font-weight: 500;
			padding-bottom: 28rpx;
			border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);

			.goods_img {
				width: 160rpx;
				height: 160rpx;
				margin-right: 20rpx;
			}

			.goods_info {
				color: #9C9AA1;

				.info-name {
					font-size: 28rpx;
					font-weight: 700;
					color: rgba(39, 38, 41, 1);
				}

				.info-bord {
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(109, 108, 112, 1);
					margin-top: 20rpx;
				}

			}


		}

		.list {
			display: flex;
			flex-direction: column;
			gap: 20rpx;
			margin: 20rpx 0rpx;
		}

		.line {
			width: 702rpx;
			height: 0rpx;
			border: 2rpx dashed rgba(0, 0, 0, 0.1);
			margin: 40rpx 0rpx;
		}

		.form_wrap {
			width: 100%;

			.submit_btn {
				width: 100%;
				height: 100rpx;
				border-radius: 52rpx;
				background: #3783FC;
				margin-top: 58rpx;
				display: flex;
				justify-content: center;
				line-height: 100rpx;
				font-size: 32rpx;
				font-weight: 700;
				color: rgba(255, 255, 255, 1);
			}
		}
	}

	// .minus {
	// 	width: 44rpx;
	// 	height: 44rpx;
	// 	background-color: #C8C8C8;
	// 	border-radius: 50%;
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// }

	// .plus {
	// 	width: 44rpx;
	// 	height: 44rpx;
	// 	background-color: #806AF7;
	// 	border-radius: 50%;
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// }

	// .content {
	// 	width: 100%;
	// 	padding: 32rpx 28rpx;
	// 	box-sizing: border-box;

	// 	.goods_info_wrap {
	// 		display: flex;
	// 		justify-content: space-between;
	// 		width: 100%;
	// 		font-size: 28rpx;
	// 		font-weight: 500;
	// 		padding-bottom: 28rpx;
	// 		border-bottom: 2rpx dashed #DBD9D9;

	// 		.goods_info {
	// 			flex: 2;
	// 			display: flex;
	// 			flex-direction: column;
	// 			color: #9C9AA1;
	// 			padding-top: 30rpx;

	// 			.barCode {
	// 				display: flex;
	// 				margin-top: auto;
	// 				margin-bottom: 0;
	// 				color: #272629;
	// 			}
	// 		}

	// 		.goods_img {
	// 			flex: 1;
	// 			display: flex;
	// 			flex-direction: column;
	// 			align-items: center;
	// 		}
	// 	}

	// 	.form_wrap {
	// 		width: 100%;

	// 		.form_item {
	// 			display: flex;
	// 			align-items: center;
	// 			width: 100%;
	// 			padding: 30rpx 0;
	// 			border-bottom: 2rpx solid #F5F2F2;
	// 			transition: all .3s;

	// 			.value {
	// 				margin-left: auto;
	// 				margin-right: 0;

	// 				.form_icon {
	// 					display: inline-block;
	// 					margin-left: 20rpx;
	// 				}
	// 			}
	// 		}

	// 		.price_wrap {
	// 			display: flex;
	// 			align-items: center;
	// 			gap: 20rpx;
	// 			width: 100%;
	// 			height: 104rpx;
	// 			border-radius: 20rpx;
	// 			// border: 2rpx solid #F5F2F2;
	// 			margin-top: 20rpx;

	// 			.price {
	// 				flex: 1;
	// 				display: flex;
	// 				justify-content: space-around;
	// 				border-right: 2rpx solid #F0F0F0;
	// 			}

	// 			.quantity {
	// 				flex: 1;
	// 			}
	// 		}

	// 		.actionSheet:active {
	// 			background-color: #EAEAEA;
	// 		}

	// 		.tip {
	// 			display: flex;
	// 			justify-content: space-between;
	// 			align-items: center;
	// 			font-size: 28rpx;
	// 			font-weight: 500;
	// 			color: rgba(156, 154, 161, 1);

	// 			.dele {
	// 				display: flex;
	// 				align-items: center;
	// 			}
	// 		}

	// 		.submit_btn {
	// 			width: 100%;
	// 			height: 100rpx;
	// 			border-radius: 52rpx;
	// 			background: #806AF7;
	// 			margin-top: 58rpx;
	// 			display: flex;
	// 			justify-content: center;
	// 			line-height: 100rpx;
	// 			font-size: 32rpx;
	// 			font-weight: 700;
	// 			color: rgba(255, 255, 255, 1);
	// 		}
	// 	}
	// }
</style>